<template>
  <!-- 
    1.list-type="picture-card"是最外层边框的基本样式
    2.action 后端接口地址（必传） 可以发送自己的云服务器
    3.:file-list="fileList" 用于预览图片
    4. :on-preview 配置预览函数
    5.limit 是限制用户上传的最大数量
    6.on-remove 配置删除的函数,未来点击会自动触发这个钩子函数
      (只是结构删除了！！！！数据没有更新) （手动进行更新）
    7.:http-request自定义上传图片 会覆盖掉默认的上传方式
    8.:on-change 文件上传成功或是失败都会执行这个函数
    9.
 -->
  <div>
    <el-upload
      :class="{ disable: isShowDia }"
      list-type="picture-card"
      action=""
      :limit="limitCount"
      :file-list="fileList"
      :on-preview="handlePicture"
      :on-remove="handleRemove"
      :http-request="hanldeUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog
      title="预览图片"
      :visible="isShowPicture"
      @close="isShowPicture = false"
    >
      <img style="width: 100%" :src="imgUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  // AKIDc4GBpCI7fwxh9LHwLTLwFH3YmjOnvmNi  id
  // 5C2cvxiBOL1PXOyGI3XkgMkrhHabLo0v key
  SecretId: 'AKIDc4GBpCI7fwxh9LHwLTLwFH3YmjOnvmNi', // 身份识别ID
  SecretKey: '5C2cvxiBOL1PXOyGI3XkgMkrhHabLo0v', // 身份秘钥
})

export default {
  name: 'ImageUpload',
  props: {
    limitCount: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      imgUrl: '',
      isShowPicture: false, //控制预览弹窗显隐
      // 存储的图片数据
      fileList: [],
    }
  },

  computed: {
    isShowDia() {
      return this.fileList.length >= this.limitCount
    },
    uploadAllSuccess() {
      return this.fileList.every((item) => item.status === 'success')
    },
  },
  mounted() {},

  methods: {
    // 文件上传成功或是失败 都会执行
    handleChange(file, fileList) {
      // file添加数组数据之前
      // fileList 添加完数组后
      console.log(file, fileList, 2222)
      this.fileList = [...fileList]
    },
    // 进行上传操作
    hanldeUpload(params) {
      // 上传前
      console.log(params, 111)
      // 用uid是文件对象的唯一标识, 用uid可以找到并修改fileList对象属性
      const uid = params.file.uid
      const res = this.fileList.find((item) => item.uid === uid)
      res.status = 'uploading'
      if (params.file) {
        // 执行上传操作
        cos.putObject(
          {
            Bucket: 'hrsass-1300926133' /* 存储桶 */,
            Region: 'ap-shanghai' /* 存储桶所在地域，必须字段 */,
            Key: params.file.name /* 文件名 */,
            StorageClass: 'STANDARD', // 上传模式, 标准模式
            Body: params.file, // 上传文件对象
            onProgress: (progressData) => {
              res.percentage = parseInt(progressData.percent * 100)
            },
          },
          (err, data) => {
            // console.log(data,111)
            if (err) return console.log('失败了！！')
            // 改变状态 （异步）
            setTimeout(() => {
              res.status = 'success'
            }, 500)
            // 预览地址改为真的云地址
            res.url = 'https://' + data.Location
            console.log(res)
          }
        )
      }
    },
    // 上传之前进行校验
    handleBeforeUpload(file) {
      // console.log(file)
      // 1. 限制文件类型 file.type
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传的图片格式, 必须是jpg, gif, bmp, png的格式!')
        return false
      }
      // 2. 限制文件大小 file.size
      if (file.size / 1024 / 1024 >= 5) {
        this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
        return false
      }
      return true
    },
    handleUrl() {
      console.log('上传开始')
    },
    // 删除图片
    handleRemove(file, fileList) {
      // file 选中删除的文件
      // fileList 结构中剩余的数组数据
      // 1.利用剩余结构数组数据重新赋值原数组  达到删除的效果
      // this.fileList = [...this.fileList]
      // 2.数组方法进行过滤
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
    },
    handlePicture(file) {
      this.isShowPicture = true
      // console.log(file)
      this.imgUrl = file.url
    },
  },
}
</script>

<style lang="scss" scoped>
.disable {
  ::v-deep {
    .el-upload {
      display: none;
    }
  }
}
</style>